<template>
  <van-empty v-if="searchList.length===0" image="search" description="暂无搜索结果" />
  <ul v-else>
    <li v-for="v in searchList" @click="$router.push('/detail?id=' + v.proid)">
      <img :src="v.img2" alt="">
      <h4 class="van-multi-ellipsis--l2">{{ v.proname }}</h4>
      <div class="cart" @click.stop="addCart(v)">加入购物车</div>
      <div class="buy">
        <span style="font-size: 18px; color: red;line-height: 30px;">￥{{ v.originprice }}</span>
        <van-button type="danger" class="buynow" size="small">直接购买</van-button>
      </div>
    </li>
  </ul>

</template>

<script>
import { getSearchList } from '../../api/homeApi'
export default {
    data() {
        return {

            searchList: [],
        }
    },
    methods: {
          addCart(v) {
      console.log(v);
      addCartRequest(this.id, v.proid).then(res => {
        console.log(res.data);
        showSuccessToast(res.data.message)
      })
    }
    },
    mounted() {

        let word = this.$route.query.word
        console.log(word);
        getSearchList(1, 10, word).then(res => {
          console.log(res.data);
          if (res.data.data=='10002') {
            this.searchList=[]
          }else{
            this.searchList = res.data.data
          }
        })
    }
}
</script>

<style scoped>
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
}

li {
  list-style: none;
  background-color: #fff;
  width: 45%;
  margin-top: 10px;
  overflow: hidden;
}

li img {
  width: 100%;
  height: 50%;
}

li h4 {
  font-size: 14px;
  height: 30px;
}
.cart {
  height: 20px;
  font-size: 16px;
  text-align: right;
  color: #0872CE;
}

.buy {
  display: flex;
  justify-content: space-between;
  height: 30px;
  margin-top: 20px;
}

.buynow {

  font-size: 16px;
}

span {
  line-height: 30px;
}
</style>